const app = getApp();
var uploadImage = require('../../utils/uploadImg/uploadImg');
let Authorization = "Bearer " + JSON.parse(wx.getStorageSync('token'))
import __config from '../../config/config'
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },



  /**
   * 组件的初始数据
   */
  data: {
    context: null,
    index: 0,
    height: 0,
    width: 0,
    src: '', //保存后的签名图片地址
  },

  /**
   * 组件的方法列表
   */
  methods: {
    goPage(e) {
      wx.redirectTo({
        url: e.currentTarget.dataset.url
      })
    },
    initCanvas() {
      const that = this;
      const query = wx.createSelectorQuery().in(this)
      query.select('#firstCanvas')
        .fields({
          node: true,
          size: true
        })
        .exec((rect) => {
          let width = rect[0].width;
          let height = rect[0].height;
          that.setData({
            width,
            height
          });
          
          const context = wx.createCanvasContext('firstCanvas', that)
          console.log(context);
          that.setData({
            context: context
          })
          context.setStrokeStyle('#061A06')
          context.setLineWidth(2)
          context.draw()
        })
    },
    /**记录开始点 */
    bindtouchstart(e) {
      this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
    },
    /**记录移动点，刷新绘制 */
    bindtouchmove(e) {

      this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
      this.data.context.stroke();
      this.data.context.draw(true);
      this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
    },
    /**清空画布 */
    clear() {
      this.data.context.clearRect(0, 0, this.data.width, this.data.height);
      this.data.context.setStrokeStyle('#061A06')
      this.data.context.setLineWidth(2)
      this.data.context.draw();
    },
    /**导出图片 */
    export () {
       this.exportImage();  
    },
    exportImage() {
      const that = this;
      setTimeout(() => {
        wx.canvasToTempFilePath({
          fileType: 'png',
          canvasId: 'firstCanvas',
          success(res) {
          let file =  res.tempFilePath
          
            wx.uploadFile({
              url: `${__config.baseURL}/app/ossController/uploadOss`, //服务器上传图片url ,
              filePath:file,
              name: 'file',
              formData:{
                'fileHost':'file',
              },
              header: {
                "content-type": "multipart/form-data",
                'Authorization': Authorization
              },
              success(res) {
                console.log(res);
                let data = res.data;
               
                data = JSON.parse(res.data);
                that.triggerEvent('canvasChang',data.data);
                if (data.success) {
                  that.setData({
                    src: data.data
                  })
                  that.colseSign()
                  wx.showToast({
                    title: '确认成功',
                    duration: 2000,
                    mask: true
                  })

                } else {
                  wx.showToast({
                    title: '保存失败，请检查网络',
                    duration: 3000,
                    mask: true
                  })
                }
              },
              fail(err) {
                console.log(err)
              }
            })
          },
          fail(err) {
            console.log(err)
            app.showMsg('保存失败')
          }
        }, that)
      }, 500)
    },
    colseSign() {
      this.triggerEvent('sign', this.data.src)
    },
  // 删了就报警告
    true:function(){

    }

  },
  lifetimes: {
    ready: function () {
      this.initCanvas()
    }
  },

})